<template>
	<view>
		<uni-nav-bar dark title="创建机构" fixed :statusBar="true" left-icon="left" @clickLeft="clickLeft">
		</uni-nav-bar>

		<view class="box">
			<view class="list" :class="{cur: selectIndex == index}" v-for="(item, index) in listData"
				@click="onselect(index)">
				<view class="img">

				</view>
				<view class="info">
					<view>{{item.name}}</view>
					<view>{{item.desc}}</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button class="" @click="onNext">下一步</button>
		</view>
	</view>
</template>

<script>
	import {
		getdynamic
	} from '@/api/mechanism/index.js'
	export default {
		data() {
			return {
				id: '',
				listData: [{
						name: '协会',
						desc: '适用于各类官方机构、协会'
					},
					{
						name: '公司',
						desc: '适用于公司、合伙企业等盈利性组织'
					},
					{
						name: '学校',
						desc: '适用于大学、中学、小学等学校'
					},
					{
						name: '其他',
						desc: '适用于其他组织团体或个人'
					}
				],
				selectIndex: 0,
				selected: ""
			}
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			onselect(index) {
				this.selectIndex = index;

			},
			onNext() {
				uni.navigateTo({
					url: '/pages/mechanism/cretedForm?type=' + (this.selectIndex + 1) + (this.id ?
						`&id=${this.id}` : '') + (this.selected ? '&selected=1' : '')
				})
			}
		},
		onLoad({
			id,
			selected
		}) {
			this.id = id;
			this.selected = selected;
			if (id) {
				getdynamic(id).then(res => {
					let {
						type
					} = res.data
					this.selectIndex = type - 1;
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.btn {
		width: 90%;
		left: 0;
		right: 0;
		margin: auto;
		position: fixed;
		bottom: 20%;

		button {
			background-color: $btn-bg-color;
			color: #fff;
		}
	}

	.box {
		padding: 30rpx 20rpx;

		.list {
			display: flex;
			margin-bottom: 30rpx;
			padding: 20rpx;
			background-color: #F6F7FB;
			border-radius: 20rpx;

			&.cur {
				background-color: #FEF3F1;
			}

			.img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 100%;
				background-color: #7E6CF4;
				margin-right: 20rpx;
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				view {
					&:nth-child(1) {
						font-size: 30rpx;
						margin-bottom: 10rpx;
					}

					&:nth-child(2) {
						font-size: 26rpx;
						color: #958E91;
					}
				}
			}
		}
	}
</style>